<template>
  <div>
    <h1>Playground</h1>
    <!--
      姓名
        非空
      年龄
        非空

      el-form
        :model :rules
      el-form-item
        prop
      input
        v-model
     -->
    <el-form :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const validateAge = (rule, value, callback) => {
      console.log({ rule, value, callback })
    }
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: ['change', 'blur'] },
          { validator: validateAge, trigger: ['change', 'blur'] }
        ]
      }
    }
  }
}
</script>

<style>

</style>
